<template>
  <el-drawer
    v-model="drawer"
    title="I am the title"
    :direction="direction"
	:size="688"
	:with-header="false"
  >
  
  <div class="img-drawer-layout">
		<div class="header">
			<span>选择图标</span>
		</div>  
		<div class="body">
			<div class="img-classify-panel">
				<el-tree :props="props" :load="loadNode" node-key="id" lazy :highlight-current="true" @node-click="handleNodeClick" />
			</div>
			<div class="img-list-panel">
				<div class="body">
					<ul>
<!-- 						<li >
							<div>
								<div class="icon">
									<img src="../../assets/icons/add.svg"/>
								</div>
								<div class="title">
									<span>双方都是</span>
								</div>
							</div>
						</li>
						
						<li >
							<div>
								<div class="icon">
									<img src="../../assets/icons/add.svg"/>
								</div>
								<div class="title">
									<span>双方都是</span>
								</div>
							</div>
						</li>
						<li >
							<div>
								<div class="icon">
									<img src="../../assets/icons/add.svg"/>
								</div>
								<div class="title">
									<span>双方都是</span>
								</div>
							</div>
						</li>
						<li >
							<div>
								<div class="icon">
									<img src="../../assets/icons/add.svg"/>
								</div>
								<div class="title">
									<span>双方都是</span>
								</div>
							</div>
						</li>
						<li >
							<div>
								<div class="icon">
									<img src="../../assets/icons/add.svg"/>
								</div>
								<div class="title">
									<span>双方都是</span>
								</div>
							</div>
						</li> -->
						
						<li v-if="cur_node!=null" v-for="asset in assetRefs" >
							<div>
								<div class="icon">
									<img v-if="!cur_node.leaf" src="../../assets/icons/folder-add-fill.svg" @click="handleClick(asset)"/>
								</div>
								<div class="title">
									<span>{{asset.name}}</span>
								</div>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>
	  
  </div>
  
  </el-drawer>
</template>

<script lang="ts" setup>
	
	import { lazyTree,listForAsset} from "@/api/asset";
	import type Node from 'element-plus/es/components/tree/src/model/node'
	import { ref } from 'vue'
	const drawer = ref(false)
	const direction = ref('ltr')
	const assetRefs=ref([]);
	
	interface Tree {
		id:string
		pid:string
		name: string
		leaf?: boolean
	}

	const props = {
		id:'id',
		pid:'pid',
		label: 'name',
		children: 'zones',
		isLeaf: 'leaf',
	}


	const cur_resolve=ref(Object);

	const loadNode = (node: Node, resolve: (data: Tree[]) => void) => {
		cur_resolve.value=resolve;
		if (node.level === 0){
			lazyTree({
				pid:"1",
			})
			.then((res) => {
				if(res.code==200){
					return resolve(res.result)
				}else{
					ElMessage.error(res.message || '系统出错');
				}
			})
			.catch((e) => {
				return resolve([])
			})
			.finally(() => {
			});
		}
		
		if(node.data){
			lazyTree({
				pid:node.data.id,
			})
			.then((res) => {
				if(res.code==200){
					return resolve(res.result)
				}else{
					ElMessage.error(res.message || '系统出错');
				}
			})
			.catch((e) => {
				return resolve([])
			})
			.finally(() => {
			});
		}
		
	  // if (node.level > 1) return resolve([])
	}
	
	
	const cur_node=ref({});
	
	const handleNodeClick=(node:object)=>{
		cur_node.value=node;
		
		if(node.leaf){
			loadForAsset(node.id);
		}else{
			loadChildrensForAssetClassify(node.id);
		}
	}
	
	
	const loadChildrensForAssetClassify=(pid:String)=>{
		lazyTree({
			pid:pid,
			keywords:""
		})
		.then((res) => {
			if(res.code==200){
				assetRefs.value=res.result
			}else{
				ElMessage.error(res.message || '系统出错');
			}
		})
		.catch((e) => {
		})
		.finally(() => {
		});
	}
	
	const loadForAsset=(classifyId:String)=>{
		listForAsset({
			classifyId:classifyId,
			keywords:""
		})
		.then((res) => {
			if(res.code==200){
				assetRefs.value=res.result
			}else{
				ElMessage.error(res.message || '系统出错');
			}
		})
		.catch((e) => {
		})
		.finally(() => {
		});
	}

	const handleClick=(obj:object)=>{
		
		console.log(obj);
		
		if(!obj.leaf){
			lazyTree({
				pid:obj.id,
				keywords:""
			})
			.then((res) => {
				if(res.code==200){
					assetRefs.value=res.result
				}else{
					ElMessage.error(res.message || '系统出错');
				}
			})
			.catch((e) => {
			})
			.finally(() => {
			});
		}else{
			listForAsset({
				classifyId:obj.id,
				keywords:""
			})
			.then((res) => {
				if(res.code==200){
					assetRefs.value=res.result
					console.log(res.result)
				}else{
					ElMessage.error(res.message || '系统出错');
				}
			})
			.catch((e) => {
			})
			.finally(() => {
			});
		}
	}

	const show=()=>{
		drawer.value=true
	}

	onMounted(() => {
	});


	defineExpose({
		show
	});
	
</script>

<style  scoped>
	
	/deep/.el-tree {
	    position: relative;
	    cursor: default;
	    background:transparent;
	    color: #ccc;
	    font-size: 13px;
	}
	
	/deep/.el-tree-node__content {
		border-left: 2px solid transparent; 
	}
	
	
	
	/deep/ .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
	    background-color: #174a7d!important;
	    border-left: 2px solid #0080ff; 
	}
	
	/deep/ .el-tree-node__content:hover{
		 border-left: 2px solid #0080ff; 
		 background-color: #515664;
	}
	
	/deep/ .el-tree-node:focus>.el-tree-node__content {
		background-color: #515664;
	}
	
	.img-drawer-layout{
		display: flex;
		-webkit-flex-direction: column;
		flex-direction: column;
		height: 100%;
		>.header{
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-pack: justify;
			-ms-flex-pack: justify;
			justify-content: space-between;
			-webkit-box-align: center;
			-ms-flex-align: center;
			align-items: center;
			font-size: 13px;
			border-radius:0;
			height: 2.5rem;
			padding: 0;
			border-bottom: 1px solid #424653;
			background-color: #313235;
			width: 100%;
			color: #ccc;
			>span{
				border-left-width: 3px!important;
				padding-left: 8px!important;
				height: 16px;
				line-height: 17px;
				font-size: 13px;
				color: #ccc;
				-webkit-box-sizing: border-box;
				box-sizing: border-box;
				white-space: nowrap;
				border-left: 2px solid #0080ff;
				margin-left: 8px;
				padding-left: 3px;
			}
			>div{
				float: right;
				margin-top: -1px;
				>button{
				   width: 1.4375rem;
				   height: 1.875rem;
				   margin-right: 0.3125rem;
				   background: transparent;
				   color: #ccc;
				}
			}
		}
		>.body{
			flex: 1;
			background-color: #2d2d31;
			display: flex;
			-webkit-flex-direction: row;
			flex-direction: row;
			>.img-classify-panel{
				background-color: rebeccapurple;
				width: 220px;
				-webkit-box-sizing: border-box;
				box-sizing: border-box;
				height: 100%;
				border-right: 1px solid #515664;
				
				border-top: 0 solid #515664;
				border-right: 1px solid #515664;
				-webkit-box-sizing: border-box;
				box-sizing: border-box;
				background-color: #2d2d31;
				border-bottom: none;
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				-webkit-box-orient: vertical;
				-webkit-box-direction: normal;
				-ms-flex-direction: column;
				flex-direction: column;
				
				
				
				>.header{
					display: -webkit-box;
					display: -ms-flexbox;
					display: flex;
					-webkit-box-pack: justify;
					-ms-flex-pack: justify;
					justify-content: space-between;
					-webkit-box-align: center;
					-ms-flex-align: center;
					align-items: center;
					width: 100%;
					height: 34px;
					background-color: #36373a;
					border-bottom: 1px solid #18181b;
					border-top: 1px solid #515664;
					color: #ccc;
					font-size: 14px;
					>span{
						border-left-width: 3px!important;
						padding-left: 8px!important;
						height: 16px;
						line-height: 17px;
						font-size: 13px;
						color: #ccc;
						-webkit-box-sizing: border-box;
						box-sizing: border-box;
						white-space: nowrap;
						border-left: 2px solid #0080ff;
						margin-left: 8px;
						padding-left: 3px;
					}
					>div{
						float: right;
						margin-top: -1px;
						>button{
						   width: 1.4375rem;
						   height: 1.875rem;
						   margin-right: 0.3125rem;
						   background: transparent;
						   color: #ccc;
						}
					}
				}
			}
			>.img-list-panel{
				flex: 1;
				>.header{
					display: -webkit-box;
					display: -ms-flexbox;
					display: flex;
					-webkit-box-pack: justify;
					-ms-flex-pack: justify;
					justify-content: space-between;
					-webkit-box-align: center;
					-ms-flex-align: center;
					align-items: center;
					width: 100%;
					height: 34px;
					background-color: #36373a;
					border-bottom: 1px solid #18181b;
					border-top: 1px solid #515664;
					color: #ccc;
					font-size: 14px;
					>span{
						border-left-width: 3px!important;
						padding-left: 8px!important;
						height: 16px;
						line-height: 17px;
						font-size: 13px;
						color: #ccc;
						-webkit-box-sizing: border-box;
						box-sizing: border-box;
						white-space: nowrap;
						border-left: 2px solid #0080ff;
						margin-left: 8px;
						padding-left: 3px;
					}
					>div{
						float: right;
						margin-top: -1px;
						>button{
						   width: 1.4375rem;
						   height: 1.875rem;
						   margin-right: 0.3125rem;
						   background: transparent;
						   color: #ccc;
						}
					}
				}
				>.body{
					>ul{
						display: flow-root;
						position: relative;
						>li{
							list-style: none;
							float: left;
							cursor: pointer;
							color: #ccc;
							padding: 0.625rem;
							
							display: -webkit-box;
							display: -ms-flexbox;
							display: flex;
							-webkit-box-pack: justify;
							-ms-flex-pack: justify;
							justify-content: space-between;
							-webkit-box-align: center;
							-ms-flex-align: center;
							align-items: center;
							
							>div{
								padding: 0.125rem;
								border: 1px solid  transparent;
								>.icon{
									width: 90px;
									height: 90px;
									border: 1px solid  #515664;
									display: -webkit-box;
									display: -ms-flexbox;
									display: flex;
									-webkit-box-pack: justify;
									-ms-flex-pack: justify;
									justify-content: space-between;
									-webkit-box-align: center;
									-ms-flex-align: center;
								}
								>.title{
									font-size: 0.75rem;
									text-align: center;
								}
							}
							>div:hover{
								border: 1px solid  #0080ff;
							}
						}
					}
				}
			}
		}
	}
</style>